<template>
    <div class="item-map">
        <div id="map"></div>
    </div>
</template>


<script>
    import "echarts-gl";
    import json from "@/assets/mapJson/yibin.json";
    import lines from "@/assets/lines.json";
    export default {
      props: {
        mapData: {
          type: Array,
          default: () => []
        }
      },
      watch: {
        mapData: {
          handler(val) {
            // json.features.forEach(item=>{
            //   this.zbList.push(item.properties.name)
            // })
            this.initChart()
          },
          deep: true
        }
      },
        data() {
            return {
                zbList:{},
                option: {},
                mapDate: [],
                map: 'map',
                echartObj: null,
                lineList:[],
                lineDataList:[],
                scdata :[
                    {"name":"格里坪水厂","jwd":[104.739336, 28.991554],"value": 439},
               ]

            }
        },
        created() {

            // let tempList ={name:'1line',coords:[]};
            // this.$nextTick(()=>{
            //   this.initChart()
            // })
            json.features.forEach(item=>{
              this.zbList[item.properties.name]=item.properties.centroid
              // this.zbList.push
            })


            return
            lines.forEach((item,index)=>{
                if(index%10==0||index==lines.length-1){
                    if((index%60==0||index==lines.length-1)&&index!=0){
                        tempList.coords.push(item);
                        dataList.push(tempList);
                        tempList={name:index+'line',coords:[]};
                    }else{
                        tempList.coords.push(item);
                    }
                    list.push(item)
                    if(index==lines.length-1){
                        this.lineList=list
                        this.lineDataList = dataList;
                        setTimeout(() => {
                        }, 1000)
                    }
                }
            })

        },
        methods: {
            initChart() {
                // 获取各地区经纬度中心点
                const proviceCenter = new Map()
                json.features.forEach((provice) => {
                    proviceCenter.set(provice.properties.name, provice.properties.centroid)
                })
                // 合并数据
                const barData = json.features.map((item) => {
                    return {
                        name: item.properties.name,
                        value: [...proviceCenter.get(item.properties.name), 1]
                    }
                })
                var myChart = this.$echarts.init(document.getElementById('map'))
                this.$echarts.registerMap("yibin", json);

                const option = {
                    // visualMap: [
                    // //     {
                    // //     show: false,
                    // //     text: ['bar3D'],
                    // //     calculable: true,
                    // //     seriesIndex: 0,
                    // //     min: 1,
                    // //     max: 2,
                    // //     inRange: {
                    // //         color: ['rgba(0, 143, 155,0.1)', 'rgba(0, 143, 155,1)']
                    // //     }
                    // // },
                    // ],
                    geo3D: {
                        map: 'yibin',
                        // 区域边界高度
                        regionHeight: 0.02,
                        // 真实感渲染
                        shading: 'realistic',
                        // 将地图设置一个摆放平台
                        groundPlane: {
                            show: false,
                            color: '#666'
                        },
                        label: { // 标签的相关设置
                            show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                            distance:0,
                            opacity: 1,
                            fontSize:17,
                            color: '#f5f88e', // 地图初始化区域字体颜色
                            borderWidth:0,
                        },
                        // realisticMaterial: {
                        //   detailTexture: './earth.jpg'
                        // },
                        // 视角控制
                        viewControl: {
                            projection: 'perspective',
                            panSensitivity:1,
                            panMouseButton: 'right',
                            // 距离
                            distance: 40,
                            // 角度
                            alpha: 30,
                            center :[0,0,20],
                            minDistance : 2,
                            beta: 10,
                            animationDurationUpdate: 10,
                            autoRotate: false,
                            minBeta: -120,
                            maxBeta: 120
                        },
                        // 灯光
                        // light: {
                        //   main: {
                        //     // color: '#687',
                        //     intensity: 1.2, // 光照强度
                        //     shadowQuality: 'high', // 阴影亮度
                        //     shadow: true, // 是否显示阴影
                        //     alpha: 45,
                        //     beta: -25
                        //   },
                        //   ambientCubemap: {
                        //     diffuseIntensity: 1.2,
                        //     // 光源材质
                        //     texture: './light.png'
                        //   }
                        // },
                        // 区块颜色及边线设置
                        itemStyle: {
                            label: {
                                show: true
                            },
                            borderColor: '#489',
                            borderWidth: 2,
                            color: 'rgba(8,24,39,0.1)',
                        },
                        // hover时样式
                        emphasis: {
                            label: {
                                show: true
                            },
                            itemStyle: {
                                color: 'rgb(8,24,39)'
                            }
                        }
                    },
                    series: [

                    ]
                }
                 let data= this.mapData.map(item=>{
                    return {
                        name: item.num+'',
                        value: this.zbList[item.areaName],
                        color: '#fff',

                    }
                  })
                for (let i = 0; i < data.length; i++) {
                    option.series.push( {
                            name: 'scatter3D',
                            type: "scatter3D",
                            coordinateSystem: 'geo3D',
                            symbol: 'circle',
                            symbolSize: 10,
                            label: {
                                show: true, //是否显示点上面的标签，默认false
                                formatter:  data[i].name||'',
                                color: '#fff',
                                fontSize: 24,
                                position: 'top',
                            },
                            itemStyle: {
                                borderWidth: 0,
                                borderColor: 'blue',
                                color: data => {
                                    return data.data.color
                                }

                            },
                            data: [ // 散点数据
                                data[i]
                                 ]
                        }
                    )
                }
                myChart.setOption(option);
            },
        }

    }
</script>


<style lang="scss" scoped>
    .item {
        width: 100%;
        height:5.3rem;
        background: red;
        display: flex;
        justify-content: center;
        position: relative;
    }
        #map{
          width: calc(100% + 5rem);
          margin:-0.5rem 0 0 -5rem;
            height:5.8rem;
        }
</style>
